import React, { Component } from 'react';
import { Link } from 'react-router-dom';
// import {sendAction} from '../../store/action'//node导出变量名必须用{}包裹
// import { connect } from 'react-redux'
import { Layout, Card, Carousel } from 'element-react';


import './index.css'

class Index extends Component {
  state = {
    banner: [],
    songs: [],
    songers: [],
  };
  // 组件加载完毕
  componentDidMount() {
    this.getBannerData();
    // this.getMvData();
    this.getSongsData();
    this.getSongersData();
  }
  componentWillUnmount() {
    console.log('首页销毁了')
    // 卸载异步操作设置状态
    
    this.setState = (state, callback) => {
      return;
    }
  }
  // 点我按钮
  // handleClick = () => {

  //   this.props.sendAction()
  // }
  
  // banner
  getBannerData = () => {
    let that = this;
    that.$post(that.$api.banner).then(res => {
      if (res.code === 200) {
        let { banner } = that.state;
        that.setState({
          banner: res.banners
        }, r => {
          console.log(that.state.banner)
        });

      }
    });
  }
  // songs
  getSongsData = () => {
    let that = this;
    that.$post(that.$api.songs, { limit: 24 }).then(res => {
      if (res.code === 200) {
        console.log(res)
        let { songs } = that.state;
        that.setState({
          songs: res.playlists
        }, r => {
          console.log(that.state.songs)
        });

      }
    });
  }
  // songers
  getSongersData = () => {
    let that = this;
    that.$post(that.$api.songers, { limit: 24 }).then(res => {
      if (res.code === 200) {
        console.log(res)
        let { songers } = that.state;
        that.setState({
          songers: res.artists
        }, r => {
          console.log(that.state.songers)
        });

      }
    });
  }
  
  render() {
    const { mv, banner, songs,songers } = this.state;
    return (
      <div className="home">
        <Layout.Row className='container'>
          {
            <Carousel interval="4000" type="card" height="200px">
              {
                banner.map((item, index) => {
                  return (
                    <Carousel.Item key={index}>
                      <img src={item.imageUrl} className="banner-img" alt="" />
                    </Carousel.Item>
                  )
                })
              }
            </Carousel>
          }
        </Layout.Row>
       
        <Layout.Row className='container'>
          <h4 className="big-title clearfix">
            <p className="fl">精品歌单</p>
            <p className="fr">更多</p>
          </h4>
        </Layout.Row>
        <Layout.Row className='container'>
          {
            songs.map((item, index) => {
              return <Layout.Col key={index} span={4} offset={0}>
                <Link style={{display:'block'}} to={`/muiscDetail/${item.id}`} >
                  <Card bodyStyle={{ position: 'relative', padding: 0, }}>
                    <img src={item.coverImgUrl} className="image" />
                    <div className="card-bottom" style={{ padding: 10 }}>
                      <span className="card-title">{item.name}</span>
                    </div>
                  </Card>
                </Link>
              </Layout.Col>
            })
          }
        </Layout.Row>
        <Layout.Row className='container'>
          <h4 className="big-title clearfix">
            <p className="fl">歌手</p>
            <p className="fr">更多</p>
          </h4>
        </Layout.Row>
        <Layout.Row className='container singers'>
          {
            songers.map((item, index) => {
              return <Layout.Col key={index} span={3} offset={0}>
                <Link to={`/mvDetail/${item.id}`} >
                  <Card bodyStyle={{ position: 'relative', padding: 0, }}>
                    <img src={item.img1v1Url} className="image" />
                    <div className="card-bottom" style={{ padding: 10 }}>
                      <span className="card-title">{item.name}</span>
                      {/* <div className="bottom clearfix">
                        <time className="time">1</time>
                      </div> */}
                    </div>
                  </Card>
                </Link>
              </Layout.Col>
            })
          }
        </Layout.Row>
      </div>
    );
  }
}
// 发送数据
// const mapDispatchToProps = (dispatch) => {
//   return {
//     sendAction: () => {
//       dispatch({
//         type: 'send_action',
//       });
//     }
//   }
// }
// export default connect(null, mapDispatchToProps)(Index);
export default Index;
